<template>
    <van-tabs animated type="card" color="#2c85f3">
        <van-tab title="通知公告">
            <van-swipe class="my-swipe" indicator-color="#2c85f3">
                <van-swipe-item v-for="(list, index) in listData" :key="index">
                    <div class="swipeIcon">
                        <img
                            src=""
                            alt=""
                        />
                    </div>
                    <div class="swipeContent">
                        <div
                            class="swipeItem"
                            v-for="(item, index) in list"
                            :key="index"
                            @click="goContent(item)"
                        >
                            {{item.title}}
                        </div>
                    </div>
                </van-swipe-item>
            </van-swipe>
        </van-tab>
        <van-tab title="人才政策">
            <van-swipe class="my-swipe" indicator-color="#519bf5">
                <van-swipe-item v-for="(list, index) in policyData" :key="index">
                    <div class="swipeIcon swipeIconH">
                        <img
                            src=""
                            alt=""
                        />
                    </div>
                    <div class="swipeContent">
                        <div
                            class="swipeItem"
                            v-for="(item, index) in list"
                            :key="index"
                            @click="goContent(item)"
                        >
                            {{item.title}}
                        </div>
                    </div>
                </van-swipe-item>
            </van-swipe>
        </van-tab>
        <van-tab title="人才服务">
            <van-swipe class="my-swipe" indicator-color="#519bf5">
                <van-swipe-item>
                    <div class="iconContent">
                        <div
                            class="iconItem"
                            v-for="(item, index) in iconContent"
                            :key="index"
                        >
                            <a :href="item.url">
                                <img :src="item.img" alt="" />
                                <p>{{ item.text }}</p>
                            </a>
                        </div>
                    </div>
                </van-swipe-item>
            </van-swipe>
        </van-tab>
    </van-tabs>
</template>

<script>
import axios from "@/api/axios.js";
export default {
    data() {
        return {
            tabData: [
                {
                    title: "通知公告",
                },
                {
                    title: "人才政策",
                },
                {
                    title: "人才服务",
                },
            ],
            iconContent: [
                {
                    img: require("../assets/images/人才认定1.png"),
                    text: "高层次人才认定",
                    url: "https://wssp.hainan.gov.cn/hnwt/talent-service",
                },
                {
                    img: require("../assets/images/人才落户2.png"),
                    text: "人才落户",
                    url: "https://ycjmt.haikou.gov.cn/hngzplat-web/pages/home/huzhengbjm/huzheng.html?tabType=0",
                },
                {
                    img: require("../assets/images/住房补贴.png"),
                    text: "住房补贴",
                    url: "https://wssp.hainan.gov.cn/hnwt/flagship?url=https%3A%2F%2Fzwfw.dn.haikou.gov.cn%2FdepServices.html%3Ftype%3DtalentIntroduction%26ticketSNO%3D",
                },
                {
                    img: require("../assets/images/专业资格认定1.png"),
                    text: "专业资格认定",
                    url: "https://wssp.hainan.gov.cn/hnwt/handlingGuideline?id=870492&sourcekey=A53BA0D0EF354F29BB4A78336CD3C6A6",
                },
                {
                    img: require("../assets/images/流动资格确定.png"),
                    text: "流动资格确认",
                    url: "https://wssp.hainan.gov.cn/hnwt/handlingGuideline?id=805068&sourcekey=C6A9011BB9534B64804DC5E4A1669327",
                },
                {
                    img: require("../assets/images/工作居留许可.png"),
                    text: "工作居留许可",
                    url: "https://fuwu.most.gov.cn/lhgzweb/?cmsArticleContentPage&artId=bb7f31e76281c43a0162a420a9f407f2",
                },
            ],
            listData:[], //公告数据信息
            policyData:[], //政策数据
        };
    },
    methods: {
        goContent(item) {
            this.$router.push({name:'Content',params:{content:JSON.stringify(item)}});
        },
        //获取公告
        getNotice(){
            axios.get(`/hkrc/app/selectNoticeByMap?pageNo=${1}&pageSize=${15}`).then(res=>{
                console.log(res.data);
                for(var i=0,len=res.data.list.length;i<len;i+=5){
                    this.listData.push(res.data.list.slice(i,i+5));
                }
                console.log(this.listData);
            })
        },
        //获取人才政策
        getTalentPolicy(){
            axios.get(`/hkrc/app/selectTalentPolicyByMap?pageNo=${1}&pageSize=${15}`).then(res=>{
                console.log(res.data);
                for(var i=0,len=res.data.list.length;i<len;i+=5){
                    this.policyData.push(res.data.list.slice(i,i+5));
                }
                console.log(this.policyData);
            })
        },
        // onClickTab(index) {
        //     this.tabIndex = index;
        //     console.log(index);
        // },
        // onChange(index) {
        //     console.log(index);
        // },
    },
    created(){
        this.getNotice()
        this.getTalentPolicy()
    }
};
</script>

<style lang="less" scoped>
.my-swipe {
    margin: 0 18.5px;
    margin-top: 7.5px;
    border-radius: 10px;
    .van-swipe-item {
        width: 100%;
        padding-bottom: 20px;
        color: #000;
        display: flex;
        background-color: #fff;
        box-sizing: border-box;
        .swipeIcon {
            margin-top: 6px;
            margin-left: 7.5px;
            margin-right: 7.5px;
            width: 22.5px;
            height: 22.5px;
            background: #2c85f3;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
                width: 12px;
                height: 10px;
            }
        }
        .swipeIconH {
            background: rgb(253, 190, 80);
        }
        .swipeContent {
            flex: 1;
            .swipeItem {
                padding: 10px 0;
                border-bottom: 1px solid #ddd;
                &:last-child {
                    border-bottom: none;
                }
            }
        }
        .iconContent {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            text-align: center;
            padding-bottom: 10px;
            .iconItem {
                padding-top: 10px;
                width: calc(100% / 3);
                img {
                    width: 42px;
                    height: 42px;
                }
            }
        }
    }
}
</style>